<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Bug 60737 test case</title>
        <style type="text/css">
            /* Use customized scrollbar to avoid platform differences. */
            <!--
            ::-webkit-scrollbar {
                    width: 20px;
                    height: 20px;
            }
            ::-webkit-scrollbar-button {
                height: 20px;
                width: 20px;
                background-color: blue;
            }

            ::-webkit-scrollbar-track-piece  {
                background-color: gray;
            }

            ::-webkit-scrollbar-thumb {
                height: 20px;
                width: 20px;
                background-color: red;
            }
            -->
        </style>
    </head>
    <body style="margin:0px">
        <div id="container" style="border:1px solid black; height:150px; width:100px; overflow:auto;">
            <div id="expander" style="height:100px; width:5000px; background-color:green; border:2px solid red;">
            </div>
        </div>
        <p id="result">Test did not run.</p>
        <script src="../resources/gesture-util.js"></script>
        <script>
            if (window.testRunner)
                testRunner.dumpAsText();
            var container = document.getElementById("container");
            container.scrollLeft = 2;

            async function runTest() {
              await waitForCompositorCommit();

              // Drag scrollbar thumb to the left.
              const scrollPromise = waitForScrollEvent(container);
              if (window.eventSender) {
                eventSender.mouseMoveTo(30, 145);
                eventSender.mouseDown();
                eventSender.mouseMoveTo(0, 145);
                eventSender.mouseUp();
              }
              await scrollPromise;
              await waitForCompositorCommit();
              if (window.testRunner) {
                document.getElementById("result").innerText =
                    container.scrollLeft == 0 ? "PASS" : "FAIL";
                testRunner.notifyDone();
              }
            }

            runTest();
            testRunner.waitUntilDone();
        </script>
    </body>
</html>
